<div nz-row>
  <ng-container *ngIf="listOfData.length > 0; else noData">
    <ng-container *ngFor="let item of listOfData">
      <div class="card-div" nz-col nzSpan="4">
        <nz-card nzHoverable nzBorderless [nzCover]="coverTemplate" (click)="gotoDetails(item)">
          <p class="title">
            <a>{{item.title}}</a>
          </p>
          <p class="store-name">
            <a stopPropagation (click)="gotoStore(item)">{{item.storeName}}</a>
          </p>
          <p>
            <nz-button-group nzSize="small" stopPropagation>
              <button nz-button>关注</button>
              <button nz-button nzType="primary" nzDanger>加入购物车</button>
            </nz-button-group>
          </p>
        </nz-card>
        <ng-template #coverTemplate>
          <img alt="example" [src]="item.pic"/>
        </ng-template>
      </div>
    </ng-container>
  </ng-container>

  <ng-template #noData>
    <div nz-col nzSpan="24">
      <nz-empty></nz-empty>
    </div>
  </ng-template>
</div>
